import React from 'react';
import ClassNames from 'classnames';
import { empty } from '@/common/utils';
import LogoWhite from '@/assets/images/logo_primary.png';

import styles from '../style/Header.scss';

const Header = ({ list, value, onChange }) => {
  const onChangeHandle = (v) => {
    if (value === v) return;

    return onChange(v);
  };
  return (
    <header className={styles.container}>
      <img className={styles.logo} src={LogoWhite} />
      <div className={styles.menus}>
        {list.map((row, index) => (
          <div
            className={ClassNames(styles.menuItem, { [styles.isActive]: value === row.value })}
            onClick={() => onChangeHandle(row.value)}
            key={index}
          >
            {row.label}
          </div>
        ))}
      </div>
    </header>
  );
};

Header.defaultProps = {
  list: [],
  value: 'live',
  onChange: empty,
};

export default Header;
